<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>在线抽奖 - 众人搜索网</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="一个简单的在线抽奖系统, 可用于公司年会抽奖, 电视台抽奖等，可以自己设定抽奖名单、抽奖人数、每次出奖人数，有防止重复得奖的功能。">
<meta name="keywords" content="在线抽奖">
<link href="choujiang/style_002.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="choujiang/jquery-ui-1.css">
	<link rel="stylesheet" type="text/css" href="choujiang/style.css">
	<script src="choujiang/ca-pub-0652501482160045.js"></script><script type="text/javascript" src="choujiang/jquery.js"></script>
	<script type="text/javascript" src="choujiang/jquery-ui-1.js"></script>

<style type="text/css">
table{
	margin: 12px auto;
	border-collapse: collapse;
	width: 95%;
	background: #fff;
}

th, td{
	border: 2px solid #333;
}

label{
	margin: 6px 0;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

input[type=text]{
	width: 600px;
}
input{
	width: expression(this.type=="text"?"600px":"auto");
}
textarea{
	width: 600px;
}

#main{
	color: #000;
	margin: 0 auto;
	padding-top: 40px;;
	width: 980px;
}

#event_title{
	color: rgb(0, 0, 0);
	margin: 26px;
	padding: 0;
	font-size: 30px;
	text-align: center;
}
#event_title span{
	padding: 0 32px;
	/* background: #03e; */
}

#rolling_board{
	color: #000;
	line-height: 40px;
	font-size: 40px;
	font-weight: bold;
	margin: 34px auto;
	padding: 8px;
	width: 640px;
	text-align: center;
	background: rgb(255, 255, 255);
	border: 6px solid #03f;
}

#current_step{
	line-height: 42px;
	font-size: 42px;
	font-weight: bold;
}

#tabs{
	padding: 0;
}

#tabs-1{
	padding: 4px;
	font-size: 14px;
	text-align: center;
	border: 3px solid #33f;
	height: 580px;
}

#tabs-2,
#tabs-3,
#tabs-4{
	padding: 4px;
	border: 1px solid #ccc;
}

#tabs-3 h3,
#tabs-4 h3{
	padding-left: 6px;
	border-left: 6px solid #c00;
}
#tabs-4 h2{
	text-align: center;
}

#rotate_div{
	padding-top: 60px;
	height: 400px;
}

#print_box{
	margin-top: 30px;
	font-weight: bold;
	font-size: 28px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#print_box span{
	margin: 4px;
	color: rgb(0, 0, 0);
	/* background: #36f; */
}
</style>


<link rel="preload" href="choujiang/integrator.js" as="script"><script type="text/javascript" src="choujiang/integrator.js"></script></head>

<body class="bg index">
<div id="container">

<!--body-->

<div id="wrapper" class="mh">
<h2 style="text-align: center">在线抽奖</h2>

    

<script type="text/javascript">
<!--
var game;


$(function(){
	$('#loading').hide();
	$('#tabs').slideDown('fast');
	$('#tabs').tabs();

	game = new Game();
	save_setting();
});

// 绑定回车键盘操作
$(document).keypress(function (e){
	switch(e.which){
		case 13:
			game.process();
			break;
	}
});

//-->
</script>


<div id="main">



<div id="loading" style="text-align: center; display: none;">
	<h2>Loading...</h2>
	</div>




<div id="tabs" style="display: block;" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<div id="tabs-1" style="background: rgba(0, 0, 0, 0) url("choujiang/2.jpg") no-repeat scroll 0% 0%;" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
	<h1 id="event_title"><span>活动标题</span></h1>

	<div id="rotate_div">
		<div><span id="current_step"></span></div>

		<div id="rolling_board" style="display: none;">...</div>

		<div id="print_box">请按回车开始</div>
	</div>
</div>
<!-- /#tabs-1 -->

<div id="tabs-2" style="background: #fff;" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
	<label>活动标题</label>
	<div><input name="title" value="活动标题" type="text"></div>

	<label>奖项设置</label>
	<div>每行一个奖项, 格式为竖线分隔的: 奖项名|数量|每次抽几个|奖品</div>
<textarea name="prizes" rows="6" cols="84">三等奖|4|2|美女1名/每人
二等奖|2|2|100万美金/每人
一等奖|1|1|10本世界名著/每人
</textarea>

	<label>候选人列表</label>
	<div>每行一人, 或半角逗号分隔</div>
<textarea name="candidates" rows="6" cols="84">宋爱梅
王志芳
于光
贾隽仙
贾燕青
刘振杰
郭卫东
崔红宇
马福平
冯红
崔敬伟
穆增志
谢志威
吕金起
韩云庆
鲁全福
郭建立
郝连水
闫智胜
</textarea>

	<label>跳动时间间隔</label>
	<div><input name="interval" value="50" style="width: 50px;" type="text"> ms</div>


	<label>背景图片</label>
	<div>可以输入图片链接使用网络上的图片, 也可以把图片拷贝到当前目录, 把图片文件名填入即可.</div>
	<div><input name="background_image" value="" type="text"></div>


	<p><input value="保存" onclick="save_setting()" type="button"></p>
</div>
<!-- /#tabs-2 -->

<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
	<h3>还未开始</h3>
</div>
<!-- /#tabs-3 -->

<div id="tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
	<h2>抽奖软件</h2>

	<h3>操作方便</h3>
	<p>抽奖过程全键盘操作, 只需要按回车(Enter)键即可, 类似播放PPT幻灯片, 非常简单.</p>

	<h3>配置灵活</h3>
	<p>可配置的选项有: 活动标题, 奖项, 候选人, 摇奖时的跳转速度, 背景图片. 其中, 每一个奖项, 可以一次开完, 
也可以一次只开一部分. 例如, 三等奖一共6个, 每次只开2个, 需要开3次才能开完三等奖, 增加娱乐性. 
图片可以更换为带自己公司Logo的图片, 以便适应当前节日, 所以, 本抽奖程序任何节日的任何类似的抽奖节目都可使用.</p>

	<h3>抽奖流程</h3>
<pre>等待开始
开场(open): 奖项介绍
奖项循环: 如果多于一个奖项, 则循环
	奖项开场(step_open)
	摇奖循环: 如果不是一次开完一个奖项, 则循环
		摇奖开始(rotate_start)
		摇奖结束(rotate_stop)
	奖项结束(step_close): 单项中奖名单
闭场(close)
</pre>
<h3>本站源码</h3>
<p><a href = '/choujiang.tar.gz' target="_blank">源码下载</a></p>
</div>
<!-- /#tabs-4 -->

	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
		<li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">抽奖</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-2">设置</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-3">结果</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-4">帮助</a></li>
	</ul>
</div>




<script type="text/javascript">
<!--
function in_array(item, list){
	for(var i=0; i<list.length; i++){
		if(item == list[i]){
			return true;
		}
	}
	return false;
}

/**
 * 返回指定元素在数组中的索引, 如果没找到, 返回-1;
 */
function array_find(list, item){
	for(var i=0; i<list.length; i++){
		if(item == list[i]){
			return i;
		}
	}
	return -1;
}

// 从数组中删除元素. 返回新数组.
function array_del(list, item){
	var arr = [];
	for(var i=0; i<list.length; i++){
		if(item != list[i]){
			arr.push(list[i]);
		}
	}
	return arr;
}

// 从数组中删除元素. 返回新数组.
function array_del_all(list, items){
	var arr = [];
	for(var i=0; i<list.length; i++){
		if(array_find(items, list[i]) == -1){
			arr.push(list[i]);
		}
	}
	return arr;
}

/**
 * 把数组当作环形的, 返回从start开始, 一共count个元素.
 * 如果count大于数组长度, 返回整个数组.
 */
function array_slice(list, start, count){
	var ret;

	ret = list.slice(start, start + count);
	if(ret.length < count){
		ret = ret.concat(list.slice(0, count - ret.length));
	}

	return ret;
}

// 扰乱数组元素的顺序.
function array_shuffle(list){
	var len = list.length;
	for(var i=0; i<len*5; i++){
		var p1 = parseInt(len * Math.random());
		var p2 = parseInt(len * Math.random());
		var tmp = list[p1];
		list[p1] = list[p2];
		list[p2] = tmp;
	}
}


/*
状态/动作

开场(open)
循环{
	奖项开场(step_open)
	奖项抽奖(rotate_start)
	奖项抽奖(rotate_stop)
	奖项闭场(step_close)
}
闭场(close)

*/
var Game = function(){
	var self = this;

	this.step = -1;
	this.interval = 100;
	this.rotate_index = 0;
	self.action = 'open';

	this.prizes = [];
	this.candidates = [];
	this.results = [];

	this.init = function(){
		this.step = 0;
		this.stop = false;
		this.rotate_index = 0;
		self.action = 'open';
		this.results = [];

		for(var i=0; i<self.prizes.length; i++){
			var p = self.prizes[i];
			self.results[i] = [];
		}

		show_current_step('');
		var str = '请按回车开始';
		str += '<br/><br/>';
		str += '<a href="http://www.sharejs.com">sharejs.com 在线小工具</a>';
		print_box('请按回车开始');

		$('#rolling_board').hide();
		$('#rotate_div').css('background', '');
	}

	this.reset = function(){
		this.prizes = [];
		this.candidates = [];
		this.results = [];
	}

	this.process = function(){
		show_results();

		// 先更新状态再执行函数
		switch(self.action){
			case 'open':
				self.action = 'step_open';
				$('#rotate_div').hide();
				on_open();
				$('#rotate_div').fadeIn('slow');
				break;
			case 'close':
				self.action = '';
				on_close();
				break;
			case 'step_open':
				self.action = 'rotate_start';
				$('#rotate_div').hide();
				on_step_open();
				$('#rotate_div').fadeIn('fast');
				break;
			case 'step_close':
				if(self.step == self.prizes.length){
					self.action = 'close';
				}else{
					self.action = 'step_open';
				}
				on_step_close();
				break;
			case 'rotate_start':
				self.action = 'rotate_stop';
				on_rotate_start();
				break;
			case 'rotate_stop':
				on_rotate_stop();
				break;
			default:
				save_setting();
				break;
		}
	};
}

function on_open(){
	show_current_step('活动说明');

	var str = '<table align="center">';
	str += '<tr><th>奖项</th><th>数量</th><th>奖品</th></tr>\n';
	for(var i=game.prizes.length-1; i>=0; i--){
		var p = game.prizes[i];
		str += '<tr><td>' + p.name + '</td><td>' + p.num + '</td><td>' + p.award + '</td></tr>\n';
	}
	str += '</table>';
	print_box(str);
}

function on_close(){
	show_current_step('');

	$('#print_box').hide();
	var str = '';
	str += '<span><b style="font-size: 62px; background: #36f;">抽奖结束</b><span><br/>';
	print_box(str);
	$('#print_box').fadeIn('slow', function(){
		$('#rotate_div').css('background', 'url(framework.gif)');
	});
}

function on_step_open(){
	show_current_step();
	print_box('按回车开始');
	$('#rolling_board').html('...');
}

function on_step_close(){
	var str = '';
	str += '<span>&nbsp;* 中奖名单 *&nbsp;<br/><br/>';
	var r = game.results[game.step - 1];
	for(var n=0; n<r.length; n++){
		str += ' &nbsp;' + r[n];
	}
	str += '</span>';

	print_box(str);
	$('#rolling_board').slideUp('normal');
}

function on_rotate_start(){
	$('#rolling_board').slideDown('normal');

	game.interval = parseInt($('input[name=interval]').val());

	game.stop = false;
	game.rotate_index = 0;

	// 打乱顺序
	array_shuffle(game.candidates);

	rotate_run();

	show_current_step();
	print_box('按回车停止');
}


function on_rotate_stop(){
	// 等一段随机时间再停止.
	game.interval += parseInt(0.9 * game.interval);
	setTimeout('game.stop=true', 230 + parseInt(230*Math.random()));
	//game.stop = true;
}


function rotate_run(){
	var num_a = game.prizes[game.step].num_a_time;
	var size = game.prizes[game.step].num - game.results[game.step].length;
	if(size > num_a){
		size = num_a;
	}

	var arr = array_slice(game.candidates, game.rotate_index, size);
	$('#rolling_board').html(arr.join(' '));

	game.rotate_index += num_a;
	if(game.rotate_index >= game.candidates.length){
		game.rotate_index -= game.candidates.length;
	}

	if(game.stop){
		game.action = 'rotate_start';

		game.results[game.step] = game.results[game.step].concat(arr);
		game.candidates = array_del_all(game.candidates, arr);

		show_results();
		print_box('按回车继续');

		if(game.results[game.step].length == game.prizes[game.step].num){
			game.step ++;
			game.action = 'step_close';
		}

		var h = '<span style="color: #f33">' + $('#rolling_board').html() + '</span>';
		$('#rolling_board').html(h)
	}else{
		setTimeout('rotate_run()', game.interval);
	}
}


function show_current_step(str){
	if(str == undefined){
		var found = game.results[game.step].length;
		var all = game.prizes[game.step].num;
		var num_a = game.prizes[game.step].num_a_time;
		var b = (num_a+found) > all? all : (num_a+found);

		var str = game.prizes[game.step].name + '(' + game.prizes[game.step].num + '个';
		if(num_a != all){
			str += ', ' + (found + 1) + '-' + b;
		}
		str +=  ')';
	}
	if(str == ''){
		$('#current_step').hide('fast');
	}else{
		$('#current_step').html(str);
		$('#current_step').show();
	}
}

function print_box(str){
	if(str == undefined){
		var str = '<span>';
		var r = game.results[game.step];
		for(var n=0; n<r.length; n++){
			str += r[n] + ' &nbsp;';
		}
		str += '</span>';
	}
	if(str == ''){
		$('#print_box').hide('fast');
	}else{
		$('#print_box').html(str);
		$('#print_box').show();
	}
}

function show_results(){
	var str = '';
	for(var i=game.results.length-1; i>=0; i--){
		str += '<h2>' + game.prizes[i].name + '</h2>';
		var r = game.results[i];
		for(var n=0; n<r.length; n++){
			str += r[n] + ' &nbsp;';
		}
		str += '<br/>';
	}
	$('#tabs-3').html(str);
}


function save_setting(){
	game.reset();

	var ps = $.trim($('textarea[name=prizes]').val()).split('\n');
	for(var i=0; i<ps.length; i++){
		var p = $.trim(ps[i]);
		if(p.length == 0){
			continue;
		}
		var ex = p.split('|');
		var prize = {
			name : $.trim(ex[0]),
			num : parseInt($.trim(ex[1])),
			num_a_time : parseInt($.trim(ex[2])),
			award : $.trim(ex[3])
		};
		game.prizes.push(prize);
	}

	var ps = $.trim($('textarea[name=candidates]').val()).replace(/,/g, '\n').split('\n');
	for(var i=0; i<ps.length; i++){
		var p = $.trim(ps[i]);
		if(p.length == 0){
			continue;
		}
		game.candidates.push(p);
	}

	$('#event_title span').html($('input[name=title]').val());
	$('#tabs-1').css('background', 'url(' + $('input[name=background_image]').val() + ') no-repeat');

	game.init();
}

//-->
</script>




</div>
<!-- /#main -->

</div>


<!--body end-->
</div>

<div class="cl"></div>
<!--footer-->
<div id="footer">

</div>
<a class="gotop" href="#"></a>


</body></html>